.card {
  --border-color: var(--theme-color-bg-1);
  text-decoration: none;
  color: var(--theme-color-text);
  display: block;
  border: 1px solid var(--border-color);
  border-radius: var(--theme-border-radius);
  overflow: clip;

  & img {
    aspect-ratio: 21 / 9;
    object-fit: cover;
    transition: transform 300ms ease-in-out;
    height: auto;
  }

  &:hover {
    border-color: var(--theme-color-accent);

    & img {
      transform: scale(1.1);
    }
  }

  .publishDate {
    color: var(--theme-color-text-light);
  }

  .imageWrapper {
    aspect-ratio: 21 / 9;
    overflow: clip;
  }

  .cardContent {
    padding: 1rem;
    height: 15rem;
    overflow: clip;
    position: relative;

    &::after {
      content: '';
      pointer-events: none;
      position: absolute;
      inset: 0;
      background: linear-gradient(0deg, white 0%, transparent 100%);
    }
  }

  .h2 {
    font-size: 1.2rem;
    margin: 0;
    text-wrap: balance;
  }

  .p {
    color: black;
  }
}
